<template>
	<view>
		<view class="index_list">
			<view class="index_list1">
				<!-- 头像 -->
				<view class="index_list1_portrait">
					<image :src="item.userphoto" mode="widthFix" lazy-load=true></image>
					<!-- 昵称 -->
					<text>{{item.username}}</text>
				</view>
				<view class="index_list1_add" v-if="item.attention">
					<view class="icon iconfont icon-add" style="font-size: 20rpx;"></view>
					<text style=" font-size: 20rpx;">关注</text>
				</view>
			</view>
			<view class="index_list2">{{item.title}}</view>
			<template v-if="item.type=='img'  ">
				<view class="index_list3">
					<!-- 封面 -->
					<image :src="item.titlephoto" mode="widthFix" lazy-load=true></image>
				</view>
			</template>
			<template v-else-if="item.type=='video' ">
				<view class="index_list3">
					<!-- 封面 -->
					<image :src="item.titlephoto" mode="widthFix" lazy-load=true></image>
					<!-- 视频播放按钮 -->
					<view  class="index_list3_video  icon iconfont icon-bofang "></view>
					<!-- 播放信息 -->
					<view class="index_list3_size">
						<text>{{item.playnum}}次播放 2:52</text>
					</view>
				</view>
			</template>
			<view class="index_list4">
				<view class="index_list4_happy" >
					<!-- 笑脸 -->
					<text :class="{active:(item.infonum.index==1)}"  class="xiao icon iconfont icon-smile-filling"></text>
					<text class="index_list4_text">{{item.infonum.smile}}</text>
					<!-- 衰脸 -->
					<text :class=" {active2:(item.infonum.index==2)}" class="ku icon iconfont icon-cry-filling"></text>
					<text class="index_list4_text">{{item.infonum.cry}}</text>
				</view>
				<view class="index_list4_interaction">
					<!-- 评论数 -->
					<text class="icon iconfont icon-pinglun"></text>
					<text class="index_list4_text">{{item.commentnum}}</text>
					<!-- 转发数 -->
					<text class="icon iconfont icon-zhuanfa"></text>
					<text class="index_list4_text">{{item.sharenum}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:Object,
			index:Number
		}
	}
</script>

<style lang="scss" scoped>
.index_list{
		padding: 20rpx; /* 内边距*/
		border-bottom:  1px solid #000000; /* 边框*/
		justify-content: center; /* 子元素左右居中*/
	}
	
	.index_list1{
		display: flex; /* 开启flex布局*/
		justify-content: space-between;  /* 子元素两边靠*/
		align-items: center; /* 上下居中*/
	}
		.index_list1_portrait{/* 头像和昵称部分 */
			display: flex; 
			align-items: center;  /* 上下居中*/
		}
			.index_list1_portrait>image{/* 头像 */
				width: 90rpx;
				height: 90rpx;
				margin-right: 10rpx;
				border-radius: 100%; /* 圆角*/
				
			}
		.index_list1_add{/* 关注按钮部分 */
			display: flex;
			align-items: center;
			background-color: #FAB6B6;
			padding: 5px;
		
			
		}
		
	.index_list2{/* 标题 */
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
	
	.index_list3{/* 视频图片部分 */
			justify-content: center;/* 子元素左右居中 */
			align-items: center; /* 上下居中*/
			display: flex;/* 开启flex布局 */
			position: relative; /* 开启固定定位*/
			width: 710rpx;
	}
		.index_list3>image{
			border-radius: 20rpx; /* 圆角值*/
			width: 700rpx;
			max-height: 500rpx;
		}
		.index_list3_video{
			position: absolute; /* 开启绝对定位，会忽略兄弟盒子对自身的影响*/
			font-size: 190rpx;
			color: #ffffff;
			
		}
		.index_list3_size{/*播放信息字体 */
			position: absolute;/* 开启绝对定位，会忽略兄弟盒子对自身的影响*/
			height: 40rpx;
			// background:rgb(51 51 51 / 42%);
			background: rgba(51,51,51,0.42);
			right: 30rpx;
			bottom: 15rpx;
			padding-left: 4px;
			padding-right:4px;
			border-radius: 10rpx;/* 圆角 */
			text-align: center;
			line-height:40rpx;
			font-size: 20rpx;
		}
	.index_list4{
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.index_list4_text{
		padding-right: 10px;
	}
	.xiao , .ku{color: #d9d6c3;}
	.active{
		color: #ffd400;
	}
	.active2{
		color: #122e29;
	}
</style>
